.el-button {
  --el-button-font-weight: normal;
  --el-button-text-color: var(--el-text-color-regular);
  --el-button-disabled-text-color: var(--el-text-color-placeholder);
  --el-button-disabled-bg-color: var(--el-color-info);
  --el-button-disabled-border-color: var(--el-border-color);
  --el-button-hover-text-color: var(--el-color-primary-light-3);
  --el-button-hover-link-text-color: var(--el-color-primary-light-3);
  --el-button-hover-bg-color: transparent;
  --el-button-hover-border-color: var(--el-color-primary-light-3);
  --el-button-active-text-color: var(--el-color-primary-dark-2);
  --el-button-active-border-color: var(--el-color-primary-dark-2);
  --el-button-active-bg-color: transparent;
  --el-button-active-color: var(--el-color-primary-dark-2);

  padding: 0 18px;
  box-sizing: border-box;
}

.el-button .iconfont {
  margin-right: 6px;
}

.el-button.is-text,
.el-button.is-link {
  padding: 2px;
  color: var(--hd--color-text-secondary);

  .el-icon {
    color: var(--hd--color-text-secondary);
  }
}

.el-button.is-text:not(.is-disabled):focus,
.el-button.is-text:not(.is-disabled):hover,
.el-button.is-link:not(.is-disabled):focus,
.el-button.is-link:not(.is-disabled):hover {
  color: var(--el-color-primary-light-3);
  background-color: transparent;
  border-color: transparent;

  .el-icon {
    color: var(--el-color-primary-light-3);
  }
}

.el-button.is-text:not(.is-disabled):active,
.el-button.is-link:not(.is-disabled):active {
  color: var(--el-color-primary-dark-2);

  .el-icon {
    color: var(--el-color-primary-dark-2);
  }
}

.el-button.is-disabled,
.el-button.is-disabled:focus,
.el-button.is-disabled:hover,
.el-button.is-text.is-disabled,
.el-button.is-text.is-disabled:focus,
.el-button.is-text.is-disabled:hover,
.el-button.is-plain.is-disabled,
.el-button.is-plain.is-disabled:focus,
.el-button.is-plain.is-disabled:hover,
.el-button.is-link.is-disabled,
.el-button.is-link.is-disabled:focus,
.el-button.is-link.is-disabled:hover {
  --el-button-disabled-text-color: var(--el-text-color-placeholder);
  --el-button-disabled-bg-color: var(--el-color-info);
  --el-button-disabled-border-color: var(--el-border-color);

  color: var(--el-button-disabled-text-color);
  background-color: var(--el-button-disabled-bg-color);
  border-color: var(--el-button-disabled-border-color);
}

.el-button--primary {
  --el-button-text-color: var(--el-color-white);
  --el-button-bg-color: var(--el-color-primary);
  --el-button-border-color: var(--el-color-primary);
  --el-button-hover-text-color: var(--el-color-white);
  --el-button-hover-link-text-color: var(--el-color-primary-light-3);
  --el-button-hover-bg-color: var(--el-color-primary-light-3);
  --el-button-hover-border-color: var(--el-color-primary-light-3);
  --el-button-active-text-color: var(--el-color-white);
  --el-button-active-bg-color: var(--el-color-primary-dark-2);
  --el-button-active-border-color: var(--el-color-primary-dark-2);
}

.el-button.el-button--primary.is-link:not(.is-disabled),
.el-button.el-button--primary.is-text:not(.is-disabled) {
  --el-button-text-color: var(--el-color-primary);
  --el-button-hover-text-color: var(--el-color-primary-light-3);
  --el-button-active-text-color: var(--el-color-primary-dark-2);

  color: var(--el-button-text-color);

  .el-icon {
    color: var(--el-button-text-color);
  }
}

.el-button.el-button--primary.is-link:not(.is-disabled):hover,
.el-button.el-button--primary.is-text:not(.is-disabled):hover {
  color: var(--el-button-hover-text-color);

  .el-icon {
    color: var(--el-button-hover-text-color);
  }
}

.el-button.el-button--primary.is-link:not(.is-disabled):active,
.el-button.el-button--primary.is-text:not(.is-disabled):active {
  color: var(--el-button-active-text-color);

  .el-icon {
    color: var(--el-button-active-text-color);
  }
}

.el-button--success {
  --el-button-text-color: var(--el-color-white);
  --el-button-bg-color: var(--el-color-success);
  --el-button-border-color: var(--el-color-success);
  --el-button-hover-text-color: var(--el-color-white);
  --el-button-hover-link-text-color: var(--el-color-success-light-3);
  --el-button-hover-bg-color: var(--el-color-success-light-3);
  --el-button-hover-border-color: var(--el-color-success-light-3);
  --el-button-active-text-color: var(--el-color-white);
  --el-button-active-bg-color: var(--el-color-success-dark-2);
  --el-button-active-border-color: var(--el-color-success-dark-2);
}

.el-button.el-button--success.is-link:not(.is-disabled),
.el-button.el-button--success.is-text:not(.is-disabled) {
  --el-button-text-color: var(--el-color-success);
  --el-button-hover-text-color: var(--el-color-success-light-3);
  --el-button-active-text-color: var(--el-color-success-dark-2);

  color: var(--el-button-text-color);

  .el-icon {
    color: var(--el-button-text-color);
  }
}

.el-button.el-button--success.is-link:not(.is-disabled):hover,
.el-button.el-button--success.is-text:not(.is-disabled):hover {
  color: var(--el-button-hover-text-color);

  .el-icon {
    color: var(--el-button-hover-text-color);
  }
}

.el-button.el-button--success.is-link:not(.is-disabled):active,
.el-button.el-button--success.is-text:not(.is-disabled):active {
  color: var(--el-button-active-text-color);

  .el-icon {
    color: var(--el-button-active-text-color);
  }
}

.el-button--warning {
  --el-button-text-color: var(--el-color-white);
  --el-button-bg-color: var(--el-color-warning);
  --el-button-border-color: var(--el-color-warning);
  --el-button-hover-text-color: var(--el-color-white);
  --el-button-hover-link-text-color: var(--el-color-warning-light-3);
  --el-button-hover-bg-color: var(--el-color-warning-light-3);
  --el-button-hover-border-color: var(--el-color-warning-light-3);
  --el-button-active-text-color: var(--el-color-white);
  --el-button-active-bg-color: var(--el-color-warning-dark-2);
  --el-button-active-border-color: var(--el-color-warning-dark-2);
}

.el-button.el-button--warning.is-link,
.el-button.el-button--warning.is-text {
  --el-button-text-color: var(--el-color-warning);
  --el-button-hover-text-color: var(--el-color-warning-light-3);
  --el-button-active-text-color: var(--el-color-warning-dark-2);

  color: var(--el-button-text-color);

  .el-icon {
    color: var(--el-button-text-color);
  }
}

.el-button.el-button--warning.is-link:not(.is-disabled):hover,
.el-button.el-button--warning.is-text:not(.is-disabled):hover {
  color: var(--el-button-hover-text-color);

  .el-icon {
    color: var(--el-button-hover-text-color);
  }
}

.el-button.el-button--warning.is-link:not(.is-disabled):active,
.el-button.el-button--warning.is-text:not(.is-disabled):active {
  color: var(--el-button-active-text-color);

  .el-icon {
    color: var(--el-button-active-text-color);
  }
}

.el-button--danger {
  --el-button-text-color: var(--el-color-white);
  --el-button-bg-color: var(--el-color-danger);
  --el-button-border-color: var(--el-color-danger);
  --el-button-hover-text-color: var(--el-color-white);
  --el-button-hover-link-text-color: var(--el-color-danger-light-3);
  --el-button-hover-bg-color: var(--el-color-danger-light-3);
  --el-button-hover-border-color: var(--el-color-danger-light-3);
  --el-button-active-text-color: var(--el-color-white);
  --el-button-active-bg-color: var(--el-color-danger-dark-2);
  --el-button-active-border-color: var(--el-color-danger-dark-2);
}

.el-button.el-button--danger.is-link:not(.is-disabled),
.el-button.el-button--danger.is-text:not(.is-disabled) {
  --el-button-text-color: var(--el-color-danger);
  --el-button-hover-text-color: var(--el-color-danger-light-3);
  --el-button-active-text-color: var(--el-color-danger-dark-2);

  color: var(--el-button-text-color);

  .el-icon {
    color: var(--el-button-text-color);
  }
}

.el-button.el-button--danger.is-link:not(.is-disabled):hover,
.el-button.el-button--danger.is-text:not(.is-disabled):hover {
  color: var(--el-button-hover-text-color);

  .el-icon {
    color: var(--el-button-hover-text-color);
  }
}

.el-button.el-button--danger.is-link:not(.is-disabled):active,
.el-button.el-button--danger.is-text:not(.is-disabled):active {
  color: var(--el-button-active-text-color);

  .el-icon {
    color: var(--el-button-active-text-color);
  }
}

.el-button--info {
  --el-button-text-color: var(--el-color-white);
  --el-button-bg-color: var(--el-color-info);
  --el-button-border-color: var(--el-color-info);
  --el-button-hover-text-color: var(--el-color-white);
  --el-button-hover-link-text-color: var(--el-color-info-light-3);
  --el-button-hover-bg-color: var(--el-color-info-light-3);
  --el-button-hover-border-color: var(--el-color-info-light-3);
  --el-button-active-text-color: var(--el-color-white);
  --el-button-active-bg-color: var(--el-color-info-dark-2);
  --el-button-active-border-color: var(--el-color-info-dark-2);
}

.el-button.el-button--info.is-link:not(.is-disabled),
.el-button.el-button--info.is-text:not(.is-disabled) {
  --el-button-text-color: var(--el-color-info);
  --el-button-hover-text-color: var(--el-color-info-light-3);
  --el-button-active-text-color: var(--el-color-info-dark-2);

  color: var(--el-button-text-color);

  .el-icon {
    color: var(--el-button-text-color);
  }
}

.el-button.el-button--info.is-link:not(.is-disabled):hover,
.el-button.el-button--info.is-text:not(.is-disabled):hover {
  color: var(--el-button-hover-text-color);

  .el-icon {
    color: var(--el-button-hover-text-color);
  }
}

.el-button.el-button--info.is-link:not(.is-disabled):active,
.el-button.el-button--info.is-text:not(.is-disabled):active {
  color: var(--el-button-active-text-color);

  .el-icon {
    color: var(--el-button-active-text-color);
  }
}

.el-button--large {
  padding: 0 20px;
}

.el-button--small {
  height: 28px;
  padding: 0 16px;
  font-size: 14px;
  border-radius: 0;
}

.el-button--small [class*='el-icon'] + span {
  margin-left: 4px;
}
